<template>
  <div class="home industry" style="position: fixed;top: 0;z-index: 100;width: 100%;">
    <van-search class="searchinde" v-model="searchvalue" show-action placeholder="请输入搜索关键词" @search="onSearch"
      @cancel="onCancel" v-show="searchshow" />
    <div class="navheaders" v-show="!searchshow">
      <van-nav-bar @click-left="back" @click-right="Resume">
        <template #left>
          <van-icon name="arrow-left" color="#fff" size="0.6rem" />
        </template>
        <template #title>
          <span>
            <img src="../../assets/img/logo.png" />
          </span>
        </template>
        <template #right>
          <span class="industryzwlbzxgd">保存</span>
        </template>
      </van-nav-bar>
    </div>

    <div class="industryheabha" v-show="!searchshow">
      <!-- <div>
        <van-search v-model="search" readonly input-align="center" @click="searchshow=!searchshow" class="searchinde" placeholder="请输入搜索关键词" />
      </div>-->
      <p style="margin-left: 0.2rem;
    font-size: 0.3rem;
    margin-bottom: 0.2rem;
    color: #969799">
        <span>已选</span>
        <!-- <span>({{counttree.length}}/3)</span> -->
      </p>
      <div class="industryheabhachi">
        <a href="javascript:;" class="industryheabhachichild">
          {{counttree.text}}

        </a>
      </div>
    </div>
    <div class="industrytrees" v-show="!searchshow">
      <van-tree-select :items="items" @click-item="treeClick" :active-id.sync="activeIds"
        :main-active-index.sync="activeIndex" height="14rem" />
    </div>
  </div>
</template>
<script>
import DICTIONARY from '@/api/Dictionary'
export default {
  data () {
    return {
      search: '',
      searchshow: false,
      searchvalue: '', // 搜索
      items: [], // 行业列表数据存放
      activeIds: '', // 默认选中id
      counttree: '', // 选中列表
      activeIndex: 0,// 左边默认选中索引
      numter: 1
    }
  },
  computed: {},
  methods: {
    // 行业字典获取
    tcfindTree (arr, num, tred) {
      let that = this
      this.numter = num
      // console.log(res.data)
      let tread
      if (tred) {
        tread = JSON.parse(tred)
        tread = tread[tread.length - 1]
        console.log(tread, 'tread')
      }
      that.items = arr
      // 循环每个节点赋值组件需要的字段
      for (let i = 0; i < that.items.length; i++) {
        // 组件需要饿字段为children，后台返回的为childVo,需要拷贝到chileren里
        that.items[i].children = that.items[i].childVo
        // 组件需要的字段为text,后台返回为name,需要要拷贝到text里
        that.items[i].text = that.items[i].name
        // that.items[i].badge = 0;
        for (let j = 0; j < that.items[i].childVo.length; j++) {
          that.items[i].children[j].text = that.items[i].children[j].name
          // 组件需要唯一的id,简历编辑赋值的时候，后台没有返回id，所以然唯一的code=id
          that.items[i].children[j].id = that.items[i].children[j].code
          if (tread === that.items[i].children[j].code) {
            this.counttree = {
              text: that.items[i].children[j].text,
              name: that.items[i].children[j].text,
              code: that.items[i].children[j].code,
              id: that.items[i].children[j].id,
              parentCode: that.items[i].code,
            }
            this.activeIds = tread
          }
        }
      }
      if (this.counttree !== "") {
        this.parentNum()
      }
      this.$forceUpdate()

    },
    onSearch (val) {
      this.$toast(val)
    },
    // 点击取消，隐藏搜索框
    onCancel () {
      this.searchshow = !this.searchshow
      // this.$toast("取消");
    },
    // 增加删除选中项
    treeClick (data) {
      console.log(data)

      // 如果不存在就添加

      this.counttree = data
      this.parentNum()

      console.log(this.activeIds)
    },
    // 赋值
    parentNum () {
      // that.counttree
      let that = this
      that.items.map((items, i) => {
        // 循环获取到的值
        let numVal = 0

        if (that.counttree.parentCode === items.code) {
          numVal++
        }

        // 如果为0，删除样式
        if (numVal === 0) {
          delete that.items[i].badge
        } else {
          that.items[i].badge = numVal
        }
        // that.items[i].badge = numVal;
      })
    },
    // 返回
    back () {

      this.$emit('majorCategoryclfalse', 2)
    },
    // 保存向父级传参
    Resume () {
      console.log(33333)
      if (this.counttree === '') {
        this.$toast('请选择职位')
        return false
      }
      this.$emit('majorCategoryclchren', this.numter, this.counttree)
    },
    // // 删除选中项
    // denic (index, id) {
    //   this.counttree.splice(index, 1)
    //   this.activeIds.splice(index, 1)
    //   this.parentNum()
    // },
    // 编辑回显获取父id
    parentid () {
      let that = this
      that.items.map((items, i) => {
        // that.items[i].children = that.items[i].childVo;
        // that.items[i].text = that.items[i].name;
        // 循环获取到的值
        that.items[i].children.map((val, j) => {
          that.counttree.map((id, l) => {
            if (id.code === that.items[i].children[j].code) {
              id.parentCode = that.items[i].children[j].parentCode
            }
          })
        })
      })
      that.parentNum()
    },
    // 编辑回显赋值
    substateindu (str, arrid) {
      this.counttree = []
      let arr = str.split(',')
      if (typeof arrid === 'string') {
        arrid = JSON.parse(arrid)
      }
      for (let i = 0; i < arr.length; i++) {
        this.counttree.push({
          text: arr[i],
          code: arrid[i]
        })
      }
      console.log(this.counttree, arrid)
      this.activeIds = arrid
      this.parentid()
      this.$forceUpdate()
    }
  },
  created () {
    // this.tcfindTree()
  }
}
</script>
<style scoped>
.industrytrees .van-tree-select {
  border-top: 1px solid #ebedf0;
}
</style>
